<template>
  <view style="display: flex;flex-direction: column;">
    <!-- 搜索框 -->
    <view style="border:  black solid 1rpx; margin: 20rpx 30rpx;border-radius: 5rpx; text-align: center;">
      <input type="text"  placeholder="搜索"/>
    </view>
    <!-- 下拉列表 -->
    <view style="margin-left: 10rpx;">
      <select v-model="selectedOption" style="border: none;">
        <option v-for="option in options" :value="option">{{ option }}</option>
      </select>
    </view>
    <!-- 门店列表 -->
    <view style="display: flex; flex-direction: column; margin: 20rpx 30rpx;">
      <!-- 使用v-for遍历门店数据 -->
      <view v-for="(store, index) in storeList" :key="index" style="display: flex; margin-bottom: 20rpx;">
        <view>
          <!-- 显示图片 -->
          <image :style="{width: '120rpx', height: '120rpx'}" :src="store.logo"></image>
        </view>
        <view style="margin-left: 30rpx;">
          <!-- 第一行 -->
          <view style="display: flex;">
            <!-- 保养厂名 -->
            <view>{{ store.name }}</view>
            <view style="margin-left: 40%;">{{ store.distance }}m</view>
          </view>
          <!-- 第二行 -->
          <view style="display: flex;">
            <!-- 星级 -->
            <view>{{ store.star }}</view>
            <!-- 评分 -->
            <view style="margin-left: 20%;">{{ store.score }}</view>
            <!-- 销量 -->
            <view style="margin-left: 20%;">销量{{ store.sales }}</view>
          </view>
          <!-- 第三行 -->
          <!-- 营业时间 -->
          <view>营业时间：{{ store.businessHours }}</view>
          <!-- 第四行 -->
          <!-- 位置 -->
          <view>{{ store.address }}</view>
        </view>
      </view>
    </view>
    <view style="text-align: center;">
      <text>暂无更多</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 选项框
      selectedOption: '综合排序',
      options: ['综合排序', '选项一', '选项二', '选项三'],
      // 模拟门店数据
      storeList: [
        {
          logo: '../../../static/logo.png',
          name: '伟业保养厂',
          distance: '44',
          star: '三颗星',
          score: '3分',
          sales: '322',
          businessHours: '周一至周五 09：00 - 2020：00',
          address: '山阳区人民中路32号'
        },
        {
          logo: '../../../static/logo.png',
          name: '阳光汽车养护中心',
          distance: '60',
          star: '四颗星',
          score: '4.5分',
          sales: '512',
          businessHours: '周一至周日 08：30 - 19：00',
          address: '解放区建设西路12号'
        },
        {
          logo: '../../../static/logo.png',
          name: '速达汽车维修厂',
          distance: '30',
          star: '五颗星',
          score: '5分',
          sales: '789',
          businessHours: '周二至周六 10：00 - 21：00',
          address: '高新区科技大道5号'
        }
      ]
    };
  },
  methods: {

  }
};
</script>

<style>
#list > view {
  margin: 10rpx;
}
</style>